<template>
	<view class="container">
		<!-- <web-view :src="urls"></web-view> -->
		<map style="width: 750rpx; height: 100vh;" :latitude="latitude" 
				:longitude="longitude" scale="12" :markers="markers" :polyline="polyline">
			</map>
		
	</view>
</template>

<script>

	export default {
		data() {
			return {
			data:'',
			// 地图实例
			amapPlugin:null,
			// 小程序高德地图key
			key:'082f980aab32bd4695fa92e003230bfe',
			car_id:1,
			// 图标点数据
			markers: [{
			  iconPath: "/static/img/dingwei-3.png",
			  id: 0,
			  latitude: 39.989643,
			  longitude: 116.481028,
			  width: 40,
			  height: 33
			},{
			  iconPath: "/static/img/dingwei-3.png",
			  id: 0,
			 latitude: 39.90816,
			 longitude: 116.434446,	
			  width: 40,
			  height: 34
			}],
			// // 中心点
			latitude: 35.036181,
			longitude: 118.344040,	
			
			polyline:[],
			
			urls:'/static/html/map.html'
			};
		},
		onLoad(option) {
		this.car_id=option.car_id
this.getTrackData()
		},
		methods:{
			// 获取轨迹数据
			async getTrackData(){
				var amapFile = require('../../static/js/amap-wx.js')
				this.amapPlugin = new amapFile.AMapWX({
						key:this.key
					})
				// const { data:res } = await this.$myHttp({
				// 	url:'device/locator/historicalTrack',
				// 	data:{
				// 		locator_code:'xxxxxxxxxxxxxx',  //设备id
				// 	}
				// })
				this.$cardriving(
				{
					car_id:this.car_id
				}
				).then(res=>{
					
				
				if(res.code ==1){
					// 创建一个空数组用于存放地图轨迹数据
					let arr = []
					// let data=[{baiduLat:35.036181,baiduLng:118.344040},{baiduLat:35.195695,baiduLng:118.380432},{baiduLat:35.210844,baiduLng:118.466263}]
					res.data.map((item,index)=>{
						arr.push({
							longitude:item.lot,
							latitude:item.lat
						})
					})
					
					this.polyline = [{
						points: arr,
						color: "#0091ff",   //轨迹颜色
						width: 6   ,// 轨迹线条的宽度
						arrowLine:true
					}]
					
					// 改变图标坐标
					this.markers[0].latitude = arr[0].latitude
					this.markers[0].longitude = arr[0].longitude
					this.markers[1].latitude = arr[arr.length-1].latitude
					this.markers[1].longitude = arr[arr.length-1].longitude
					// 改变中心点
					this.latitude = arr[Math.floor(arr.length/2)].latitude
					this.longitude = arr[Math.floor(arr.length/2)].longitudex
				}else{
					uni.showToast({
						title:"获取运行轨迹失败",
						icon:"none",
						duration:1000
					})
				}
				})
			},

			getline(){
				var amapFile = require('../../static/js/amap-wx.js')
				this.amapPlugin = new amapFile.AMapWX({
						key:this.key
					})
					var that = this
					// 静态死数据
					this.amapPlugin.getDrivingRoute({
				      origin: '116.481028,39.989643',
				      destination: '116.434446,39.90816',
				      success: function(data){
						  console.log(data)
				    //     var points = [];
				    //     // 通过一个点一个点生成地图轨迹数据
				    //     if(data.paths && data.paths[0] && data.paths[0].steps){
				    //       var steps = data.paths[0].steps;
				    //       for(var i = 0; i < steps.length; i++){
				    //         var poLen = steps[i].polyline.split(';');
				    //         for(var j = 0;j < poLen.length; j++){
				    //           points.push({
				    //             longitude: parseFloat(poLen[j].split(',')[0]),
				    //             latitude: parseFloat(poLen[j].split(',')[1])
				    //           })
							 
				    //         } 
				    //       }
				    //     }
				        that.polyline=[{
				            points: points,   //地图轨迹数据
				            color: "#0091ff",   //轨迹颜色
				            width: 10  ,//线条宽度
							arrowLine:true
				          }]
				      },
				      fail: function(info){
				
				      }
				    })
			}
			
			}
		}
	
</script>

<style lang="scss">

</style>
